<template>
	<view class="page-custom-pay-popup">
		<u-popup :show="show" :round="16" mode="bottom" @close="onCancel">
			<view class="container">
				<slot name="header">
					<view class="normal-title-16 flex-start-center">
						<u-icon v-if="showBack" size="24" @tap="onCancel" src="/static/other/back.svg"></u-icon>
						<text class="flex-1 text-center">{{title}}</text>	
					</view>
				</slot>
				<slot name="content">
					<view v-if="content" class="mt-7 text-center desc-14">{{content}}</view>
				</slot>
				<slot name="footer">
					<view class="btn-double mt-20">
						<view class="custom-button gray-btn full-button" @tap="onCancel">
							<u-button type="primary" shape="circle">
								<u-icon name="/static/other/cancel.svg" size="24"></u-icon>
							</u-button>
						</view>
						<view class="custom-button full-button" @tap="onConfirm">
							<u-button type="primary" shape="circle">
								<u-icon name="/static/other/confirm.svg" size="24"></u-icon>
							</u-button>
						</view>
					</view>
				</slot>
				
			</view>
			
		</u-popup>
	</view>


</template>

<script setup>
	import {
		ref,
		reactive,
	} from "vue";
	const props = defineProps({
		show: {
			type: Boolean,
			default: false,
		},
		title: {
			type: String,
			default: '',
		},
		content: {
			type: String,
			default: '',
		},
		showBack: {
			type: Boolean,
			default: false,
		}
	})
	const emit = defineEmits(['update:show', 'confirm', 'cancel']);

	const onCancel = () => {
		emit('update:show', false);
		emit('cancel')
	}
	const onConfirm = () => {
		emit('update:show', false);
		emit('confirm')
	}
</script>

<style lang="scss" scoped>
	.page-custom-pay-popup {
		.container {
			padding: 16px 16px 34px 16px;
		}
	}
</style>